<template>
  <div class="chartBox">
    <div class="biaoti">
      <img src="../../assets/UI/biaoleft.png" />确诊/无症状人员列表
    </div>
    <Table
      stripe
      height="450"
      style="margin: 0 5px"
      :columns="columns"
      :data="peopleList"
      @on-selection-change="selectChange"
    >
    </Table>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Query from "@arcgis/core/rest/support/Query";
let highlightSelect = null;
export default {
  name: "chartTop",
  data() {
    return {
      columns: [
        {
          type: "index",
          title: "序号",
          width: 60,
          align: "center",
        },
        {
          title: "确诊人员",
          width: 80,
          key: "name",
        },
        {
          title: "所属地市",
          width: 100,
          key: "stationxia",
          align: "center",
        },
        {
          title: "确诊时间",
          key: "qztime",
          align: "center",
        },
        {
          title: "人员轨迹",
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "操作",
          key: "action",
          width: 90,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    },
                  },
                },
                "新增轨迹"
              ),
            ]);
          },
        },
      ],
      peopleList: [],
    };
  },
	computed: {
		...mapState({
			view: (state) => state.oneMap.view,
			map: (state) => state.oneMap.map,
		}),
	},
  mounted() {
    this.loadPeopleList();
  },
  watch: {},
  methods: {
    loadPeopleList() {
      let query = this.$commonLayers.peopleLayer.createQuery();
      query.where = "";
      this.$commonLayers.peopleLayer.queryFeatures(query).then((res) => {
        for (let i = 0; i < res.features.length; i++) {
          let people = {
            name: res.features[i].attributes.name,
            stationxia: res.features[i].attributes.stationxia,
            qztime: this.formatDate(res.features[i].attributes.qztime),
            phone: res.features[i].attributes.phone,
          };
          this.peopleList.push(people);
        }
      });
    },
    formatDate(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      // return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      return MM + "-" + d + " " + h + ":" + m;
    },
    selectChange(selection) {
      let self = this;
      self.view
        .whenLayerView(self.$commonLayers.trailLayer)
        .then(function (layerView) {
          if (highlightSelect) {
            highlightSelect.remove();
          }
          self.$commonLayers.trailLayer.queryFeatures().then((res) => {
            console.log(res.features);
          });
          let ids = selection.map((people) => `'${people.phone}'`);
          const query = new Query();
          query.outFields = ["*"];
          query.where = `phone in (${ids.join(",")})`;

          self.$commonLayers.trailLayer
            .queryFeatures(query)
            .then(function (results) {
              if (results.features.length) {
                highlightSelect = layerView.highlight(results.features);
              }
            });
        });
    },
  },
};
</script>
<style scoped>
.chartBox {
  width: 540px;
  height: 520px;
  position: fixed;
  right: 10px;
  top: 80px;
  background: rgb(253, 253, 253, 0.8);
  box-shadow: 0px 1px 6px 0px rgba(65, 65, 65, 0.34);
  border-radius: 8px;
  /* cursor: pointer; */
}
.biaoti {
  height: 35px;
  line-height: 35px;
  font-size: 20px;
  font-weight: bolder;
  color: #024055;
  padding-left: 15px;
  padding-top: 4px;
}

.biaoti img {
  vertical-align: inherit;
  border-style: none;
  height: 70%;
  margin-right: 10px;
}

.right-one {
  background: rgb(253, 253, 253, 0.8);
  border-radius: 4px;
  height: 280px;
  width: 100%;
  overflow: hidden;
}
</style>
